<template>
	<div>
		<div class="header">



			<!-- title="智能供佛系统" -->
			<van-nav-bar style="  background: linear-gradient(90deg, #41A9B7,#4fd4e2, #41A9B7);height: 5rem;line-height: 5rem;">

				<span class="title" slot="title">用户信息</span>
				<span style="font-size: 1.5625rem ; color: white; font-weight: 500;" slot="right">
					<van-button type="primary" color="#348994" to="/login"> &nbsp;返&nbsp;&nbsp;&nbsp;回&nbsp;</van-button>
				</span>
			</van-nav-bar>
			<!-- <van-nav-bar title="智能供佛系统" style=" background: url(./images/系统标题部分.png);height: 80px;line-height: 80px; background-size:1142px 80px;background-repeat:no-repeat;">
				<van-icon name="search" slot="right" />
			</van-nav-bar> -->
		</div>


		<!-- /////////////////////////////////////////////////////////// -->
		<div class="content" >

			<!-- 1基本信息展示 -->

			<!-- <ul>
				<li><span>龛位：</span></li>
				<li>供佛人：<span></span></li>
				<li>开始日期：<span></span></li>
				<li>结束日期：<span></span></li>
				<li>供佛时长：<span></span></li>
				<li>佛龛状态：<span></span></li>
			</ul> -->
			<!-- 左对齐 -->
			
			<!-- loading -->
			<div v-if="loading" style="display: flex;align-items: center; justify-content:center">
				
				<van-loading color="#464646"	style="margin-top: 10rem;"	size="6rem"><span style="font-size: 1.3rem;color: #464646;">加载中...</span></van-loading>
				
			</div>
			
			<div v-else>
				
				
				<!-- order -->
				<div v-if="order">
					<van-row type="flex">
						<van-col span="12">
			
				
							<div style="margin-top:1rem;margin-left: 2rem;">
				
								<ul>
									<li><span>龛&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位：</span><span>{{led|ledName}}</span></li>
									<li><span>逝者姓名：</span><span>{{order.departed}}</span></li>
									<li><span>安息时间：</span> <span v-if="order.deathday_str">{{order.deathday_str}}</span>   	<span v-else>{{order.deathday|dateFilter}}<!-- {{deathday_str||(order.deathday|dateFilter)}} --></span></li>
									<li><span>圣&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</span><span>{{order.baptismal_name}}</span></li>
									
									<li><span>家&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;属：</span><span>{{order.uname}}</span></li>
									<li><span>开始日期：</span><span>{{order.starttime|dateFormat}}</span></li>
									<li><span>结束日期：</span><span>{{order.endtime|dateFormat}}</span></li>
									<li><span>存放时长：</span><span>{{order.keeptime|dokeeptime}}</span></li>
									<li><span>龛位状态：</span><span>已点亮</span></li>
									<li><span>追思寄语：</span><span>{{order.qifutext}}</span></li>
								</ul>
				
				
				
				
				
				
				
				
				
							</div>
							
							
							<!-- <div style="margin-top: 4rem;
							height: 4rem; border: solid; line-height: 4rem; font-size: 1.25rem ;
							color: #622a2a;font-weight: bold;
							background:#ffa83e ;"> -->
							
							
							
						
							<van-button  	
							@click="nextOrder()"
							style="margin-top: 1rem;width:30rem;
							height:3rem; border: solid; line-height: 3rem; font-size: 1rem ;
							color: #348994;font-weight: bold;
							background:#ffa83e ;" color="#317e69"> 查看下一单</van-button>
							<!-- </div> -->
						</van-col>
						<van-col span="12">
				
				
							<div style="float: right;width: 14rem ;">
								
								<span style="display: block;margin-bottom: 1rem; color: #205a62;	margin-top: 1rem;font-size: 1.2rem; ">验证方式</span>
								<div>
									<!-- <img src="../../public/images/faceSwiping.png" alt="" width="200" height="200" >
								<img src="../../public/images/fingerprintRecognition.png" alt="" width="200" height="200">
								<img src="../../public/images/swipingCard.png" alt="" width="200" height="200"> -->
				<van-image fit="fill" style="border: #348994 solid 3px;border-radius: 3px;"		@click="isbind('card')"width="8rem" height="8rem"  :src="(user.card=='Y'?images.card.Y:images.card.N)" />
									<van-image style="border: #348994 solid 3px; border-radius: 3px;"   fit="fill"	 @click="isbind('face')" width="8rem" height="8rem" :src="(user.face=='Y'?images.face.Y:images.face.N)" />

									<van-image 	fit="fill" style="border: #348994 solid 3px; border-radius: 3px;"	@click="isbind('fingerprint')" width="8rem" height="8rem" :src="(user.fingerprint=='Y'?images.fingerprint.Y:images.fingerprint.N)" />
				
								</div>
				
				
				
							</div>
						</van-col>
				
					</van-row>
				
				</div>
				
				<div v-else style="margin-top: 10rem;">
				
					<span style="font-size: 3rem;font-weight: 400;color: #2d7b84;">您的供佛已过期</span>
				
					<span 	@click="$router.push('gongfo')"	style="	margin-left: 2rem;	font-size: 1.25rem;font-weight: 600;color: #369068;">去供佛</span>
				
				</div>
				
			</div>
			




























			<!-- 	龛位：<br>
			供佛人： <br>
			
			开始日期：<br>
			结束日期：<br>
			供佛时长：
			佛龛状态
			 -->
			<!-- 
			佛龛信息<br>
			位置：A10<br>
			类型：送子观音<br> -->


			<!-- 2身份绑定，更新用户信息 -->









		</div>



	</div>

</template>

<script>
	export default {


		data() {
			return {
				loading:true,

				user: { //为了开发测试给的默认数据
					id: 1,
					face: "N",
					fingerprint: "N",
					card: "N",
					user_name: "章泽天"
				},
				led: {},
				order: null,
				orderList:[],
				orderIndex:0,
				input: '',

				images: {
					face: {
						Y: "./images/Yface.png", //已绑定显示的图片
						N: "./images/Nface.png" //未绑定显示的图片
					},
					fingerprint: {
						Y: "./images/Yfingerprint.png",
						N: "./images/Nfingerprint.png"
					},
					card: {
						Y: "./images/Ycard.png",
						N: "./images/Ncard.png"
					}
				}


			}
		},
		methods: {
			
			
			nextOrder(){
				let length=this.orderList.length;
				this.orderIndex++;
				if(this.orderIndex>length-1){
					this.orderIndex=0;
					this.$toast("已为您展示最近的订单！")
					
				}
				
					this.order=this.orderList[this.orderIndex];
					this.led = JSON.parse(this.order.ledmes);
					this.mqtt_blink();
				
				
			},

			isbind(type) {
				if (type == "face") {
					if (this.user.face == "N") {
						this.$router.push("addFace");
					}


				} else if (type == "fingerprint") { //没有指纹识别模块
					this.$toast.fail({
						message: '本机型暂未开放！'
					});

					/* if (this.user.fingerprint == "N") {
						this.$router.push("addFingerprint");
					} */

				} else if (type == "card") {
					if (this.user.card == "N") {
						this.$router.push("addCard");
					}
				}
			},

			getOrder() {
				
				

				this.axios.post('https://mianmianshi.com/cms/temple/client/findOder', {
						'where': {
							'user_id': this.user.id,
							state: 1 ,//已付款，没过期的
							tid:this.$store.getters.getTid|localStorage.tid
						},
					})
					.then((res) => {
						console.log("order=============================", res.data);
						if (res.data.length) {

							this.orderList=res.data;
							this.order = res.data[0];
							
						
							this.led = JSON.parse(this.order.ledmes);
							console.log(this.order.ledmes);
							console.log(this.led);
							
							/////闪灯
							
							this.mqtt_blink();
							this.doBlink();
							
							
							
							
							
							
						} else {
										
							//alert("www")
						}
						
						setTimeout(()=>{
							this.loading=false;
						},20);

					})
					.catch(function(error) {
						console.log(error);
						alert("订单查询失败")
					});
				////////////////////
			},
			
			mqtt_blink(){
				
			
			let ids=this.led[0].id+"";
			for (let i = 1; i < this.led.length; i++) {
				ids=ids+","+this.led[i].id;
			}
			
			//this.axios.post('https://xf.mianmianshi.com/led/blink', {
					this.axios.get(this.$config.doMqttUrl+'/led/blink', {
					params:{
						tid:localStorage.tid,
						ids:ids
					}
						
				})
				.then((res) => {
					
				})
				.catch(function(error) {
					console.log(error);
					//alert("服务器忙")
				});

			},


			doTime(time) {


			},
			
			doBlink_mqtt() {
				this.axios.post('https://mianmianshi.com/cms/temple/client/updateLedIsbright', {
						'ledList': this.led,
						'isbright': 4
			
					})
					.then((res) => {
			
						if (res) {
							//在这里处理能确保忽略网络延迟
							setTimeout(() =>{
								
								this.axios.post('https://mianmianshi.com/cms/temple/client/updateLedIsbright', {
									'ledList': this.led,
									'isbright': 1
								});
								
							}, 5000);
							
						}
			
			
					})
					.catch(function(error) {
						console.log(error);
						//alert("服务器忙")
					});
			
			
			},


			doBlink() {
				this.axios.post('https://mianmianshi.com/cms/temple/client/updateLedIsbright', {
						'ledList': this.led,
						'isbright': 4

					})
					.then((res) => {

						if (res) {
							//在这里处理能确保忽略网络延迟
							setTimeout(() =>{
								
								this.axios.post('https://mianmianshi.com/cms/temple/client/updateLedIsbright', {
									'ledList': this.led,
									'isbright': 1
								});
								
							}, 5000);
							
						}


					})
					.catch(function(error) {
						console.log(error);
						//alert("服务器忙")
					});


			}
			,
			doMess(value) {
			
				if (this.client.isConnected()) {
					
					
					
					
					let ledBytes=[];
					//
					let array = new ArrayBuffer(3);
					let bytes = new Int8Array(array);
					bytes[0] = ledBytes[0];
					bytes[1] = ledBytes[1];
					bytes[2] = ledBytes[2];
					//
					let message = new Paho.Message(bytes);
					message.destinationName = this.topic;
					this.client.send(message);
				} else {
					this.mqtt_begin();
					console.log("连接异常！1秒后尝试自动连接");
				}
			},
			mqtt_begin() {
				// Create a client instance
			
				let location = {
					//hostname: '129.211.90.180',
					hostname: 'xf.mianmianshi.com',
					port: 1885
				};
				let topic = this.topic;
				let client = new Paho.Client(location.hostname, Number(location.port), "clientId_gfj");
				// set callback handlers
				client.onConnectionLost = onConnectionLost;
				client.onMessageArrived = onMessageArrived;
			
				// connect the client
				client.connect({
					onSuccess: onConnect
					,useSSL:true,
					hosts:["wss://xf.mianmianshi.com:1885/mqttSSL"]
					
					
				});
				// called when the client connects
				function onConnect() {
					// Once a connection has been made, make a subscription and send a message.
					console.log("onConnect");
					/* client.subscribe(topic);
					let message = new Paho.Message("hello");
					message.destinationName = topic;
					client.send(message); */
				}
			
				// called when the client loses its connection
				function onConnectionLost(responseObject) {
					if (responseObject.errorCode !== 0) {
						console.log("onConnectionLost:" + responseObject.errorMessage);
					}
				}
			
				// called when a message arrives
				function onMessageArrived(message) {
					console.log("onMessageArrived 字符串:" + message.payloadString);
					console.log("onMessageArrived 字节:" + message.payloadBytes);
				}
			
				this.client = client;
			}







		},

		filters: {
			ledName(value) {
				let str = "";
				for (let i = 0; i < value.length; i++) {
					if (i == value.length - 1) {
						str = str + value[i].code;
					} else {
						str = str + value[i].code + ","
					}
				}
				if (str.length > 13) {
					str = str.substring(0, 13) + "....";
				}
				return str;
			},
			
			dateFilter(time) {
				
			
				let date =new Date(time);
				
				console.log(date);
				
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				
				return year + "年" + month + "月" + day + "日";
			},
			
			dateFormat(value) {

				function getMyDate(str) {
					var oDate = new Date(str),
						oYear = oDate.getFullYear(),
						oMonth = oDate.getMonth() + 1,
						oDay = oDate.getDate(),
						oHour = oDate.getHours(),
						oMin = oDate.getMinutes(),
						oSen = oDate.getSeconds(),
						oTime = oYear + '-' + addZero(oMonth) + '-' + addZero(oDay) + ' ' + addZero(oHour) + ':' +
						addZero(oMin) + ':' + addZero(oSen);
					return oTime;
				}

				function addZero(num) {
					if (parseInt(num) < 10) {
						num = '0' + num;
					}
					return num;
				}
				let dateTime = getMyDate(parseInt(value));
				return dateTime;
				//this.doTime(value);
			},
			dokeeptime(value) {
				//alert(value)
				let day = parseInt(value) / 1000 / 60 / 60 / 24;
				let m = day / 30;
				let y = day / 365;

				if (m > 1 && m < 12) {
					return m + "个月";
				} else if (y >= 1) {
					return y + "年";
				} else {
					return day + "天";
				}


			}

		},

		created() {



			console.log(this.$store.getters.getUser);
			if (this.$store.getters.getUser) { //如果有数据则接收，没有使用默认，方便测试
				this.user = this.$store.getters.getUser;
				//
				this.getOrder();

			}




			/* console.log(this.$route);
			
			if (this.$route.query) { //如果有数据则接收，没有使用默认，方便测试
				this.user = this.$route.query;
			} */


		},

		mounted() {
			//this.mqtt_begin();//不需要
		}

	}
</script>

<style scoped>
	ul li span:first-of-type {
		font-size: 1.5rem;
		font-weight: 540;
		display: inline-block;
		width: 10rem;
		

		/* text-align: justify; */


		/* letter-spacing: 1em; */

		color: #184248;
	}

	ul li span:last-of-type {
		font-weight: 600;
		font-size: 1.5rem;
		font-family: 楷体;
		color: #1c4d53;
	}

	ul li {
		/* margin-right: 5rem; */
		text-align: left;
		margin-top: 0.4rem;

		/* border-bottom: #8B4726 dotted 1px; */

	}
</style>
